<template>
  <div>
    <div class="w iconfont icon-jiantou" @click="onClickLeft"></div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swiper" :key="item"
        ><img :src="item"
      /></van-swipe-item>
    </van-swipe>
    <div class="box">
      <h5>{{ this.list.name }}</h5>
      <p class="p1">{{ this.list.characteristic }}</p>
      <p style="margin-left: 20px">
        <span style="color: red">低价￥{{ this.list.minPrice }}</span
        ><span class="p2">原价{{ this.list.originalPrice }}</span
        ><span class="p2">库车{{ this.list.stores }}</span>
      </p>
    </div>
    <div class="q1" v-html="this.content.content"></div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="ss" @click="gocar"/>
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button @click="jia" type="warning" text="加入购物车" />
      <van-goods-action-button  type="danger" text="立即购买" />
    </van-goods-action>
    <!-- //弹出层 -->
    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '37%' }"
    >
      <div class="w1">
        <img :src="this.list.pic" />
        <p>{{ this.list.name }}</p>
        <p style="color: red">￥{{ this.list.minPrice }}</p>
      </div>
      <div class="gname">{{ this.gui.name }}</div>
      <van-tag
        class="g"
        color="#7232dd"
        plain
        v-for="item in gui.childsCurGoods"
        :key="item.id"
        >{{ item.name }}</van-tag
      >
      <van-button class="btn" @click="jiaru()"  type="danger">加入购物车</van-button>
    </van-popup>
  </div>
</template>
<script>
import "../../css/v-html.css";
export default {
  data() {
    return {
      swiper: [],
      list: [],
      content: [],
      gui: [],
      show: false,
      value: 1,
      go:[],
      ss:[this.$store.state.shopcar.length]
    };
  },
  mounted() {
    this.$API.renxiang(this.$route.query.id).then((res) => {
      this.swiper = res.data.data.pics2;
      this.list = res.data.data.basicInfo;
      this.content = res.data.data;
      this.gui = res.data.data.properties[0];
      this.go=res.data.data.basicInfo
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    jia() {
      this.show = true;
    },
    jiaru(){
       if(localStorage.getItem("token")){
          this.$store.commit('add',this.go)
          alert('加入成功')
        //  this.$router.push({path:"/gou"})
       }else{
         alert("您还没有登录请先登录")
         this.$router.push({path:"/login"})
       }
    },
    gocar(){
      this.$router.push('/gou')
    }
  },
};
</script>
<style  scoped>
.w {
  width: 30px;
  height: 30px;
  position: fixed;
  background: #fff;
  top: 20px;
  left: 20px;
  z-index: 99999;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-size: 26px;
}
.my-swipe .van-swipe-item {
  width: 100%;
  height: 360px;
}
img {
  width: 100%;
  height: 100%;
}
.box {
  width: 100%;
  height: 130px;
  padding-top: 0.1px;
}
h5 {
  margin-top: 20px;
  margin-left: 20px;
}
.p1 {
  margin-top: -10px;
  margin-left: 20px;
  font-size: 10px;
  color: lightslategrey;
}
.p2 {
  margin-left: 60px;
  font-size: 10px;
  color: lightslategrey;
}
.w1 {
  width: 100%;
  height: 100px;
  float: left;
}
.w1 img {
  width: 60px;
  height: 60px;
  margin: 20px;
  float: left;
  border-radius: 5px;
}
.w1 p {
  float: left;
  width: 200px;
  height: 20px;
  padding: 0;
  margin: 0;
  margin-top: 20px;
}
.gname {
  margin-left: 22px;
}
.g {
  margin-left: 23px;
  margin-top: 30px;
  float: left;
}
.btn{
  width:100%;
  margin-top:30px;
}
</style>